<template>
  <div>
    <el-dialog :visible="isShowDialog" :title="goodsName.skuId?'编辑商品':'新增商品'" width="50%" @close="btnCancel">
      <div class="el-dialog-div">
        <el-form ref="form" :model="goodsName" :rules="rules" label-width="100px">
          <el-form-item label="商品名称" prop="skuName">
            <el-input
              v-model="goodsName.skuName"
              placeholder="请输入"
              style="width:88%"
              maxlength="15"
              show-word-limit
            />
          </el-form-item>
          <el-form-item label="品牌" prop="brandName">
            <el-input
              v-model="goodsName.brandName"
              placeholder="请输入"
              style="width:88%"
              maxlength="10"
              show-word-limit
            />
          </el-form-item>
          <el-form-item label="商品价格" prop="price">
            <el-input-number v-model="goodsName.price" :precision="2" placeholder="请输入" style="width:88%" controls-position="right" :min="0" :max="1000" />
          </el-form-item>
          <el-form-item label="商品类型" prop="className">
            <el-select v-model="goodsName.classId" style="width:88%">
              <el-option
                v-for="item in goodsType"
                :key="item.classId"
                :label="item.className"
                :value="item.classId"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="规格" prop="unit">
            <el-input
              v-model="goodsName.unit"
              maxlength="10"
              show-word-limit
              placeholder="请输入"
              style="width:88%"
            />
          </el-form-item>
          <el-form-item label="商品图片" prop="skuImage">
            <el-upload
              action="https://jsonplaceholder.typicode.com/posts/"
              list-type="picture-card"
              class="avatar-uploader boxUpload"
              :show-file-list="false"
              :before-upload="beforeAvatarUpload"
              :on-success="handleAvatarSuccess"
            >
              <img v-if="imageUrl" :src="imageUrl" class="avatar" alt="图片">
              <i v-else class="el-icon-plus" />
              <div slot="tip" class="el-upload__tip" type="flex" justify="center">支持扩展名：jpg、png，文件不得大于100kb</div>
            </el-upload>

          </el-form-item>
          <!-- footer插槽 -->
          <el-form-item>
            <el-row type="flex" class="TwoButton">
              <el-button size="small" @click="btnCancel">取消</el-button>
              <el-button type="primary" size="small" @click="btnOK">确定</el-button>
            </el-row>
          </el-form-item>
        </el-form>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { addGoodsAPI, editGoodsAPI, getGoodsTypeAPI } from '@/api/goods'
import { imageSave } from '@/api/people'
export default {
  props: {
    isShowDialog: {
      type: Boolean,
      required: true
    }
  },
  data() {
    return {
      goodsType: {},
      dialogVisible: false,
      dialogImageUrl: '',
      // 根据商品类型名添加商品类型
      goodsName: {
        classId: '',
        brandName: '',
        skuImage: '',
        skuName: '',
        unit: '',
        price: '',
        skuClass: { className: '' },
        createTime: ''
      },
      rules: {
        brandName: [{ required: true, message: '该项不能为空', trigger: 'blur' }],
        skuName: [{ required: true, message: '该项不能为空', trigger: 'blur' }],
        price: [{ required: true, message: '该项不能为空', trigger: 'blur' }],
        classId: [{ required: true, message: '该项不能为空', trigger: 'blur' }],
        unit: [{ required: true, message: '该项不能为空', trigger: 'blur' }],
        skuImage: [{ required: true, message: '该项不能为空', trigger: 'blur' }]
      },
      // 图片URL
      imageUrl: '',
      fileName: ''
    }
  },
  created() {
    this.getGoodType()
  },
  methods: {
    // 获取商品类型
    async getGoodType() {
      const res = await getGoodsTypeAPI()
      this.goodsType = res.data.currentPageRecords
    },
    // 图片上传限制
    beforeAvatarUpload(file) {
      const isJPG = file.type === 'image/jpeg'
      const isLt2M = file.size / 1024 / 1024 < 2

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 或者 NPG 格式!')
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!')
      }
      return isJPG && isLt2M
    },
    // 图片上传成功的回调函数
    async handleAvatarSuccess(res, file) {
      this.imageUrl = URL.createObjectURL(file.raw)
      const formData = new FormData()
      formData.append('fileName', file.raw)
      const files = await imageSave(formData)
      this.goodsName.skuImage = files.data
    },
    // 关闭弹框
    btnCancel() {
      this.$emit('closeDialog')
      this.$refs.form.resetFields()
      this.goodsName = {
        classId: '',
        brandName: '',
        skuImage: '',
        skuName: '',
        unit: '',
        price: '',
        skuClass: { calssName: '' },
        createTime: ''
      }
      this.imageUrl = ''
    },
    // 编辑或者添加
    async btnOK() {
      this.$refs.form.validate()
      if (this.goodsName.skuId) {
        console.log(this.goodsName)
        await editGoodsAPI(this.goodsName)
      } else {
        await addGoodsAPI(this.goodsName)
      }
      this.$message.success('恭喜，操作成功！！')
      this.$emit('closeDialog')
    },
    // 数据回显
    getGoodsInfo(goodsInfo) {
      this.goodsName = goodsInfo
      this.imageUrl = goodsInfo.skuImage
    }
  }
}
</script>

<style lang="scss" scoped>
.el-dialog-div {
  height: 60vh;
  overflow-x: hidden;
}
.common-upload-icon {
    width: 84px;
    height: 84px;
    line-height: 84px;
    text-align: center;
    color: #bac0cd;
}
.button2 {
  text-align: center;
}
.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;

    cursor: pointer;
    position: relative;
    overflow: hidden;
    .avatar {
      width: 80px;
      height: 80px;
      display: block;
    }
  }
 ::v-deep .el-upload--picture-card {
    width: 80px !important;
    height: 80px !important;
    text-align: center;
    line-height: 80px;
  }

  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
  .TwoButton {
    text-align: center;
  }
</style>
